<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>

      li{
        list-style-type: none;/* 去掉li前的点 */
        float: left;/*将li设置成做浮动，变为联动*/
      }
      a{
        display: block;/*将a变成块状*/
        width: 220px;/*设置块的宽度*/
        height: 50px;/*设置块的长度*/
        font-family: Microsoft Yahei;
        line-height: 50px;/*设置字体在块中的高度*/
        background-color: #2f4f4f;
        margin: 0px 0px;/*块里的高宽通过margin设置*/
        color: #fff;
        text-align: center;/*字体居中*/
        text-decoration: none;/*去掉下划线*/
        font-size: 15px;
      }
      a:hover{
        background-color: #2f6f4f;
      }


      .wrap {
        width: 100%;
        height: 100px;
        display: flex;
        flex-wrap: wrap;
      }
      .wrap-item {
        width: 12.5%;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .data {
        display: inline-block;
        margin-right: 20px;
        width: 40%;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.1);
      }

      .chart {
        width: 600px;
        height: 500px;
      }

      input {
        margin: 0 20px 0 10px;
        width: 100px;
        font-size: 15px;
        height: 25px;
        line-height: 25px;
      }
      button {
        margin-left: 20px;
        width: 60px;
        height: 30px;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>

  <div >
    <ul class=daohang>
      <li><a th:href="@{/}">首页</a></li>
      <li><a th:href="@{/selectList}">所有数据</a ></li>
      <li><a th:href="@{/deleteAll}">清空数据</a ></li>
      <li><a th:href="@{/huabu1}">运行轨迹</a ></li>
      <li><a th:href="@{/PID}">调PID</a ></li>
      <li><a th:href="@{/stop_start}">启动停止</a ></li>
      <li><a th:href="@{/picture1}">散点图1</a ></li>
      <li><a th:href="@{/picture2}">散点图2</a ></li>
    </ul>
  </div>


  <br>
  <br>
  <br>
  <br>
  <br>
  <br>



    <div id="app">

      <!-- 最新一行数据 -->
      <div style="display: flex; align-items: flex-start">
        <!-- 散点图 -->
        <div ref="scatterChart" class="chart"></div>
      </div>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          origin_x: 0,
          origin_y: 0,
          offset_x: 110,
          offset_y: 90,
          timer: null, // 提示定时器
          isUpdate: true, // 是否修改成功
          dataLi: [], // [x值,y值]
          curData: [], // 存放最新一行数据
          formData: {
            // pid数据
            p: 0,
            i: 0,
            d: 0,
          },
        },
        methods: {
          // 开启提示定时器
          tipStart() {
            this.timer = setTimeout(() => {
              this.timer = null;
            }, 1000);
          },
        },
        mounted() {
          // 50ms请求一次数据
          setInterval(() => {
            axios.get("http://47.106.85.109:8081/huabu").then((res) => {
              
              if (res.data) {
                const rawData = res.data.split(",");
                this.curData = rawData;
            // console.log(rawData[1])
                // 处理得到[x,y]坐标值
                const x=rawData[0];
                const y=rawData[1];
                this.origin_x = x;
                this.origin_y = y;
                this.dataLi.push([x, y]);

                // 更新散点图
                this.scatterChart.setOption({
                  series: [{ data: this.dataLi }],
                });
              }
            });
          }, 50);

          // 散点图
          this.scatterChart = echarts.init(this.$refs.scatterChart);
          const option = {
            title: {
              text: "小车轨迹散点图",
              top: "5%",
            },
            tooltip: {},
            grid: {
              top: "20%",
              bottom: "20%",
            },
            animation: false,
            xAxis: {
              name: "位移x",
              type: "value",
              // scale: true,
            },
            yAxis: {
              name: "位移y",
              type: "value",
              // scale: true,
            },
            series: [
              {
                type: "scatter",
                data: this.dataLi,
                tooltip: {
                  formatter: "{c}",
                },
                itemStyle: {
                  color: "skyblue",
                },
              },
            ],
          };
          this.scatterChart.setOption(option);
        },
      });
    </script>
  </body>
</html>
